<!DOCTYPE html>
<html lang="en">
<head>
    <title>数据分析预警</title>
    <link rel="stylesheet" href="/static/css/main-page/g-reset.css" />
    <script src="/webjars/miniui/boot.js" type="text/javascript"></script>
    <script type="text/javascript" src="/static/js/main-page/echarts.min.js"></script>
    <style type="text/css">
        body {
            background-color:#e3e3e3;
        }
        .barLine {
            width:100%;
            height:300px;
        }
        .chaobiao {
            position:relative;
            margin-top:28px;
        }
        .chaobiao .line {
            width:74%;
            margin:0 auto;
            height:200px;
            border-top:2px dotted #75b6ff;
        }
        .chaobiaoItem {
            width:25%;
            float:left;
            position:relative;
        }
        .radius-item {
            height:21px;
            width:21px;
            border:2px solid #1a85ff;
            display:inline-block;
            border-radius:50%;
            position:absolute;
            top:-12px;
            left:-10px;
        }
        .radius-item > div {
            height:9px;
            width:9px;
            margin:5px;
            background:#1a85ff;
            display:inline-block;
            border-radius:50%;
            left:-10px;
        }
        .line-item {
            width:10px;
            height:65px;
            border-left:1px solid #1a85ff;
            position:absolute;
        }
        .hecha {
            top:-36px;
            left:-15px;
            position:absolute;
        }
        .bottom-content {
            padding:8px 20px;
            border:2px solid #1a85ff;
            border-radius:4px;
            background:#e7f3ff;
            top:65px;
            left:-89px;
            position:absolute;
        }
        .AnalysContent {
            background:#fff;
            padding:16px 20px;
        }
        .titleAnalys {
            font-size:16px;
            color:#333333;
            font-weight:600;
        }
        .steps {
            margin:40px 28px 28px 28px;
        }
        .el-col-24 {
            width:100%;
        }
        .el-row {
            -webkit-box-sizing:border-box;
            box-sizing:border-box;
        }
        .mt-24 {
            margin-bottom:24px;
        }
        .progress {
            height:20px;
            margin-bottom:20px;
            border-radius:10px;
        }
        .progress > span {
            position:relative;
            float:left;
            font-size:14px;
            border-radius:10px;
        }
        .blue {
            margin:0 16px;
            background:#5ca8ff;
        }
        .progress > span > span {
            padding:0 8px;
            font-size:11px;
            font-weight:bold;
            color:#404040;
            color:rgba(0, 0, 0, 0.7);
            text-shadow:0 1px rgba(255, 255, 255, 0.4);
        }
    </style>
</head>
<body>
<#-- 超标预警 -->
<div class="AnalysContent mt-24">
    <div class="titleAnalys">超标预警</div>
    <div class="chaobiao">
        <div class="line">
            <div class="chaobiaoItem" style="margin-left:6%">
                <div class="hecha">核查</div>
                <div class="radius-item">
                    <div></div>
                </div>
                <div class="line-item"></div>
                <div class="bottom-content">
                    核查成功人数：<span id="cgRenShu"></span>
                    <br />核查总数：<span id="zongRenShu"></span>
                    <br />核查成功率：<span id="hechalv"></span>
                </div>
            </div>
            <div class="chaobiaoItem" style="margin-left:28%">
                <div class="hecha" style="color:#EF8B17">衔接</div>
                <div class="radius-item" style="border: 2px solid #EF8B17">
                    <div style="background:#EF8B17"></div>
                </div>
                <div class="line-item" style="border-left: 1px solid #EF8B17"></div>
                <div class="bottom-content" style="border: 2px solid #EF8B17;background:#FCEBD8;">
                    衔接成功人数：<span id="xianJieCGRenShu"></span>
                    <br />衔接总数：<span id="xianJieZongShu"></span>
                    <br />衔接成功率：<span id="xianjielv"></span>
                </div>
            </div>
            <div class="chaobiaoItem" style="margin-left:51%">
                <div class="hecha">安置</div>
                <div class="radius-item">
                    <div></div>
                </div>
                <div class="line-item"></div>
                <div class="bottom-content" style="left:-70px">
                    未安置人数：<span id="weiZanZhiRenShu"></span>
                    <br />安置率：<span id="anzhilv"></span>
                </div>
            </div>
            <div class="chaobiaoItem" style="margin-left:72%">
                <div class="hecha">帮教</div>
                <div class="radius-item">
                    <div></div>
                </div>
                <div class="line-item"></div>
                <div class="bottom-content" style="left:-72px">
                    失联人数：<span id="shiLianRenShu"></span>
                    <br />高风险人数：<span id="gaoFengXian"></span>
                    <br />帮教率：<span id="bjlv"></span>
                </div>
            </div>
            <div class="chaobiaoItem" style="margin-left:94%">
                <div class="hecha" style="color:#D61C00">解除</div>
                <div class="radius-item" style="border: 2px solid #D61C00">
                    <div style="background:#D61C00"></div>
                </div>
                <div class="line-item" style="border-left: 1px solid #D61C00"></div>
                <div class="bottom-content" style="border: 2px solid #D61C00;background:#F8D9D5;">
                    重新犯罪人数：<span id="zaiFanZuiRen"></span>
                    <br />重新犯罪率：<span id="zfzlv"></span>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- 趋势预警 -->
<div class="AnalysContent mt-24">
    <div class="titleAnalys" style="margin-bottom:18px">趋势预警</div>
    <el-row class="el-row" style="margin-left:18px;display:flex">
        <el-col class="line-progress el-col-24 ">
            <div class="progress">
                <span>未来第一月</span>
                <span class="blue" style="width: 0%; height: 20px;"></span>
                <span id="important1"></span>
            </div>
            <div class="progress">
                <span>未来第二月</span>
                <span class="blue" style="width: 0%; height: 20px;"></span>
                <span id="important2"></span>
            </div>
            <div class="progress">
                <span>未来第三月</span>
                <span class="blue" style="width: 0%; height: 20px;"></span>
                <span id="important3"></span>
            </div>
            <div style="width:80%;text-align:center">预释放人员趋势预警</div>
        </el-col>
        <!-- 第二列  -->
        <el-col class="line-progress el-col-24">
            <div class="progress ">
                <span>未来第一月</span>
                <span class="blue" style="width: 0%; height: 20px;"></span>
                <span id="prerelease1"></span>
            </div>
            <div class="progress">
                <span>未来第二月</span>
                <span class="blue" style="width: 0%; height: 20px;"></span>
                <span id="prerelease2"></span>
            </div>
            <div class="progress">
                <span>未来第三月</span>
                <span class="blue" style="width: 0%; height: 20px;"></span>
                <span id="prerelease3"></span>
            </div>
            <div style="width:80%;text-align:center">重点人员衔接趋势预警</div>
        </el-col>
    </el-row>
</div>
<#-- 数据统计 -->
<div class="AnalysContent mt-24">
    <div class="region-title tab-item-box clearfix">
        <div class="titleAnalys" style="margin-bottom:18px">数据统计</div>
    </div>
    <ul class="clearfix">
        <li class="fl" style="width: 33%;height: 400px">
            <div id="div1" style="height: 100%;width: 100%;"></div>
        </li>
        <li class="fl" style="width: 33%;height: 400px">
            <div id="div2" style="height: 100%;width: 100%;"></div>
        </li>
        <li class="fl" style="width: 33%;height: 400px">
            <div id="div3" style="height: 100%;width: 100%;"></div>
        </li>
        <li class="fl" style="width: 33%;height: 400px">
            <div id="div4" style="height: 100%;width: 100%;"></div>
        </li>
        <li class="fl" style="width: 33%;height: 400px">
            <div id="div5" style="height: 100%;width: 100%;"></div>
        </li>
        <li class="fl" style="width: 33%;height: 400px">
            <div id="div6" style="height: 100%;width: 100%;"></div>
        </li>
    </ul>
</div>
</body>
<script>
    $(document).ready(function () {
        mini.parse();
        //2、趋势预警：未来第一月、未来第二月、未来第三月。预释放人员趋势预警：未来第一月、未来第二月、未来第三月。
        getQuShi();
       //1、超标预警
        getCbyj();
       //3、数据统计："核查成功率","衔接成功率","安置率","帮教率","重新犯罪人数"
        getEchartsData(1);//核查成功率
        getEchartsData(2);//衔接成功率
        getEchartsData(3);//安置率
        getEchartsData(4);//帮教率
        getEchartsData(5);//重新犯罪人数
        //3、数据统计：高风险人数
        getGaoFengXianData(6);
    });

    //1、超标预警
    function getCbyj() {
        $.ajax({
            cache: false,
            async: true,
            url: '/azbj/sjtjfx/tofxyj/getCbyj',
            type: 'post',
            contentType: "application/json; charset=utf-8",
            success: function (response) {
                var o = eval('(' + response + ')');
                document.getElementById("hechalv").innerText = o.hechalv;
                document.getElementById("cgRenShu").innerText = o.cgRenShu;
                document.getElementById("zongRenShu").innerText = o.zongRenShu;
                document.getElementById("xianjielv").innerText = o.xianjielv;
                document.getElementById("xianJieCGRenShu").innerText = o.xianJieCGRenShu;
                document.getElementById("xianJieZongShu").innerText = o.xianJieZongShu;
                document.getElementById("anzhilv").innerText = o.anzhilv;
                document.getElementById("weiZanZhiRenShu").innerText = o.weiZanZhiRenShu;
                document.getElementById("bjlv").innerText = o.bjlv;
                document.getElementById("shiLianRenShu").innerText = o.shiLianRenShu;
                document.getElementById("gaoFengXian").innerText = o.gaoFengXian;
                document.getElementById("zfzlv").innerText = o.zfzlv;
                document.getElementById("zaiFanZuiRen").innerText = o.zaiFanZuiRen;
            },
            error: function (r) {
                mini.alert('Error! Please try again.' + r.responseText);
            }
        });
    }

    //2、趋势预警：未来第一月、未来第二月、未来第三月。预释放人员趋势预警：未来第一月、未来第二月、未来第三月。
    function getQuShi() {
        $.ajax({
            cache: false,
            async: true,
            url: '/azbj/sjtjfx/tofxyj/getqushiyujing',
            type: 'post',
            contentType: "application/json; charset=utf-8",
            success: function (response) {
                var o = eval('(' + response + ')');
                document.getElementById("important1").innerText = o.yuShiFangList[0];
                document.getElementById("important2").innerText = o.yuShiFangList[1];
                document.getElementById("important3").innerText = o.yuShiFangList[2];
                document.getElementById("prerelease1").innerText = o.zhongDianRenYuanlist[0];
                document.getElementById("prerelease2").innerText = o.zhongDianRenYuanlist[1];
                document.getElementById("prerelease3").innerText = o.zhongDianRenYuanlist[2];
            },
            error: function (r) {
                mini.alert('Error! Please try again.' + r.responseText);
            }
        });
    }
    //3、数据统计："1：核查成功率","2：衔接成功率","3：安置率","4：帮教率","5：重新犯罪人数"
    function getEchartsData(type) {
        var legends = ["核查成功率", "衔接成功率", "安置率", "帮教率", "重新犯罪人数"];
        $.ajax({
            url: "/azbj/fxyj/getEchartsData",
            async: true,
            type: "post",
            data: {type: type},
            success: function (success) {
                var month = success.data.columns;
                var yearCount = success.data.rows;
                chartBar1(month, yearCount, legends[type - 1], "div" + type, type);
            }
        });
    }

    //3、数据统计：高风险人数
    function getGaoFengXianData(type) {
        var legends = ["高风险人数"];
        $.ajax({
            url: "/azbj/fxyj/getGaoFengXianData",
            async: true,
            type: "post",
            data: {type: type},
            success: function (success) {
                var month = success.data.columns;
                var yearCount = success.data.rows;
                chartBar2(month, yearCount, legends[0], "div" + type, type);
            }
        });
    }

    //渲染：数据统计："1：核查成功率","2：衔接成功率","3：安置率","4：帮教率","5：重新犯罪人数"
    function chartBar1(month, yearCount, legend, divElement, type) {
        var divElement = echarts.init(document.getElementById(divElement));
        var symbol = '%';
        if (type == 5 || type == 6) {
            symbol = '';
        }
        var option = {
            tooltip: {
                trigger: 'axis',
                formatter: '{b}</br>{a}:{c}' + symbol
            },
            toolbox: {},
            legend: {
                data: [legend],
            },
            xAxis: [
                {
                    type: 'category',
                    data: month,
                    axisPointer: {
                        type: 'shadow'
                    },
                    //字体倾斜
                    axisLabel: {
                        interval: 0,
                        rotate: 40
                    }
                }
            ],
            yAxis: [
                {
                    type: 'value',
                    name: legend,
                    min: 0,
                    max: 100,
                    interval: 25,
                    axisLabel: {
                        formatter: '{value}' + symbol
                    }
                },
            ],
            series: [
                {
                    name: legend,
                    type: 'bar',
                    data: yearCount
                },
            ]
        };
        divElement.setOption(option, true);
    }

    //渲染：数据统计：高风险人数
    function chartBar2(month, yearCount, legend, divElement, type) {
        var divElement = echarts.init(document.getElementById(divElement));
        var symbol = '';
        var option = {
            tooltip: {
                trigger: 'axis'
            },
            toolbox: {},
            legend: {
                data: [legend],
            },
            xAxis: [
                {
                    type: 'category',
                    data: month,
                    axisPointer: {
                        type: 'shadow'
                    },
                    //字体倾斜
                    axisLabel: {
                        interval: 0,
                        rotate: 40
                    }
                }
            ],
            yAxis: [
                {
                    type: 'value',
                    name: legend,
                    min: 0,
                    max: 30,
                    interval: 5,
                    axisLabel: {
                        formatter: '{value}' + symbol
                    }
                },
            ],
            series: [
                {
                    name: legend,
                    type: 'bar',
                    data: yearCount
                },
            ]
        };
        divElement.setOption(option, true);
    }
</script>
</html>